<template>
   <div class="app-container pt20 map-copy">
    
      <el-table  v-loading="loading" :data="selectList" @selection-change="handleSelectionChange" @row-click="handleRowClick" border>
         <el-table-column label="序号" align="center" width="80">
            <template slot-scope="scope">
               <span>{{scope.row.index+1}}</span>
            </template>
         </el-table-column>
         <el-table-column label="表单名称" align="center" width="199" key="tableAlias" prop="tableAlias" :show-overflow-tooltip="true" >
            <!-- <template slot-scope="scope">
               <div>
                     <span>{{scope.row.tableName}}</span>
               </div>
            </template> -->
         </el-table-column>
         <el-table-column label="表单名称（数据库）" align="center" key="tableName" prop="tableName" width="300"  :show-overflow-tooltip="true">
            <template slot-scope="scope">
               <div>
                     <span>{{scope.row.tableName}}</span>
               </div>
            </template>
         </el-table-column>
         <el-table-column label="复制位置" align="center" key="type" prop="type" :show-overflow-tooltip="true">
            <template slot-scope="scope">
               <div>
                  <el-cascader
                  v-model="scope.row.type"
                  :options="treeList"
                  :props="{
                     value: 'id',
                     label: 'dirName',
                     children: 'children'
                  }"
                  @change="handleChange" refs="tress">
                  </el-cascader>
               </div>
            </template>
         </el-table-column>
         <el-table-column label="表单重命名名称" align="changTime" key="toTableAlias" prop="toTableAlias" width="199">
            <template slot-scope="scope">
               <div>
                  <el-input placeholder="请输入表单重命名名称" v-model="scope.row.toTableAlias"></el-input>
               </div>
            </template>
         </el-table-column>
         <el-table-column label="表单重命名名称（数据库）" align="center" key="toTableName" prop="toTableName" width="299" >
            <template slot-scope="scope">
               <span class="float-left" style="line-height:43px;" v-if="scope.row.prefix">{{scope.row.prefix}}</span>
               <div :class="[scope.row.prefix?'float-left':'']">
                  <el-input placeholder="请输入表单重命名名称" v-model="scope.row.toTableName"></el-input>
               </div>
            </template>
         </el-table-column>
            <el-table-column label="复制内容" align="center" width="80" >
            <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.copyData" @change="function checkbox(val){return !val}"></el-checkbox>
            </template>
         </el-table-column>
      </el-table>
      <el-form ref="form">
         <el-form-item>
            <div style="border:1px solid #ddd;height:100px;" class="mt10"  v-show="errorText">{{errorText}}</div>
         </el-form-item>
         <el-form-item class="search-btn btn-item">
            <el-button type="primary" size="mini" @click="submit" class="search-btn-item">提交</el-button>
            <el-button  type="primary" size="mini" class="search-btn-item"  @click="exitBtn">取消</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<style>
.map-copy .el-cascader{
   width:100%!important;
}
</style>
<style lang="scss" scoped>
/**
    Element class start
  **/
.search-btn{
   display: block;
   line-height:34px;
   margin-top:20px;
}
.btn-item{
   text-align: center;
}
/**
    Element class end
  **/
.mg0 {
   margin-right: 0px !important;
   margin-left: 0px !important;
}
</style>
<script>

import {mapTreeItem} from '@/api/dataManagement/system/dir'
import {copyTable} from '@/api/dataManagement/system/info'
export default {
   name: "mapCopy",
   data() {
      return {
         loading: false,
         textarea:"",
         treeList:[],
         options:[],
         Index:0,
         selectList:[],
         errorText:''
      };
   },
   watch: {
   },
   created() {
      this.selectList = JSON.parse(sessionStorage.getItem("selectList"))
   },
   mounted() {
      //  var nav =document.getElementsByClassName("el-form")[0].clientHeight
      // var mb8 =document.getElementsByClassName("mb8")[0].clientHeight
      // this.mapHeight = window.window.innerHeight-nav-mb8-160
      // console.log(this.mapHeight)\
      this.getTreeList()
      this.getCopyContent()
   },
   methods: {
      handleChange(val){
         var _dirId = val[val.length-1];
         var prefix = '',selectTreeId='';
         aaa(this.treeList,_dirId)
         function aaa(data,dirId){
               for(var i=0;i<data.length;i++){
                  if(data[i].id == dirId){
                     prefix=data[i].prefix
                     selectTreeId = data[i].id
                  } else if(data[i].children&& data[i].children.length>0) {
                     aaa(data[i].children,dirId)
                  }
               }
         }
         this.selectList[this.Index].prefix = prefix;
         this.selectList[this.Index].toDirId = selectTreeId;
      },
      getCopyContent(){
         var selectList = JSON.parse(sessionStorage.getItem("selectList"))
         for(var i=0;i<selectList.length;i++){
            selectList[i].prefix = ''
            selectList[i].index = i,
            selectList[i].copyData = false
            selectList[i].toDirId = ''
         }
         this.selectList = selectList;
      },
      handleSelectionChange(){},
      getTreeList(){
         mapTreeItem().then(res=>{
            _setData(res.data.children)
            function _setData(data){
               for(var i=0;i<data.length;i++){
                  if(data[i].children.length == 0){
                     delete data[i].children
                  } else {
                      _setData(data[i].children)
                  }
               }
            }
            this.treeList = res.data.children
         })
      },
      handleRowClick(row){
         this.Index =  row.index
      },
      submit(){
         var parmasList=[];
         this.selectList.forEach((ele)=>{
            var obj = {copyData:'',fromTableId:'',toTableAlias:"",toTableName:'',toDirId:''}
            obj['copyData'] = ele.copyData
            obj['fromTableId'] = ele.id
            obj['toTableAlias'] = ele.toTableAlias
            obj['toTableName'] = ele.prefix? (ele.prefix+ele.toTableName):ele.toTableName
            obj['toDirId'] = ele.toDirId
            parmasList.push(obj)
         })
         copyTable({dirId:this.$route.query.dirId,list:parmasList}).then(res=>{
             if(res.code == 200){
               this.$message({
                  message: res.msg,
                  type: 'sucess'
               })
               this.$router.push("/DMS/dataMap/mapDirectory?dirId="+this.$route.query.dirId);
            } else{
               this.$message({
                  message: '测试运行失败',
                  type: 'error'
               })
               this.errorText = res.msg
            }
            // errorText
         })
      },
      exitBtn(){
          this.$router.push("/DMS/dataMap/mapDirectory?dirId="+this.$route.query.dirId);
      }
   }
};
</script>
